<template>
	<div class="banner">
		<div class="top">
			<div class="header-left iconfont" @click='goback'>&#xe623;</div>
			<div class="header-center">{{ info.ln }}</div>
		</div>
		<div class="banner-main">
			<div class="left">
				<img :src='getImgUrl(info.hig)' :onerror='noImg'>
				<p>{{deatil.hz  | ellipses("10")}}</p>
			</div>
			<div class="con">
				<template v-if='info.sts == "notstarted"'>
					<p>未开赛</p>
					<p>比赛时间</p>
					<p>{{ info.sd.substring(0,10) }}</p>
					<p>{{ info.sd.substring(11,16) }}</p>
				</template>
				<!-- <template v-else-if='info.sts == "inprogress"'>
					<template v-if='info.type==3'>
						<p>{{ info.hm_q4?"第四节":info.hm_q3?'第三节':info.hm_q2?"第二节":info.hm_q1?"第一节":'正在进行中' }}</p>
						<h3>{{info.hm_rs}} - {{info.aw_rs}}</h3>
						<p class="bifen color_gray">
							<span>1st</span>
							<span>2nd</span>
							<span>3rd</span>
							<span>4th</span>
							<span>OT</span>
						</p>
						<p class="bifen">
							<span>{{info.hm_q1||'-'}}</span>
							<span>{{info.hm_q2||'-'}}</span>
							<span>{{info.hm_q3||'-'}}</span>
							<span>{{info.hm_q4||'-'}}</span>
							<span>{{info.hm_ext||'-'}}</span>
						</p>
						<p class="bifen">
							<span>{{info.aw_q1||'-'}}</span>
							<span>{{info.aw_q2||'-'}}</span>
							<span>{{info.aw_q3||'-'}}</span>
							<span>{{info.aw_q4||'-'}}</span>
							<span>{{info.aw_ext||'-'}}</span>
						</p>
					</template>
					<template v-else>
						<p>{{ info.hm_p2?"下半场":"上半场" }}</p>
						<h3>{{info.hm_rs}} - {{info.aw_rs}}</h3>
						<p class="bifen color_gray">
							<span>上半场</span>
							<span>下半场</span>
							<span>OT</span>
						</p>
						<p class="bifen">
							<span>{{info.hm_p1||'-'}}</span>
							<span>{{info.hm_p2||'-'}}</span>
							<span>{{info.hm_ext||'-'}}</span>
						</p>
						<p class="bifen">
							<span>{{info.aw_p1||'-'}}</span>
							<span>{{info.aw_p2||'-'}}</span>
							<span>{{info.aw_ext||'-'}}</span>
						</p>
					</template>
				</template> -->
				<template v-else-if='info.sts == "finished"'>
					<span>完场 ({{ info.sd.substring(0,16)}})</span>
					<h3>{{info.hm_fs}} - {{info.aw_fs}}</h3>
					<p class="bifen color_gray">
						<span>1st</span>
						<span>2nd</span>
						<span>3rd</span>
						<span>4th</span>
						<span>OT</span>
					</p>
					<p class="bifen">
						<span>{{info.hm_q1}}</span>
						<span>{{info.hm_q2}}</span>
						<span>{{info.hm_q3}}</span>
						<span>{{info.hm_q4}}</span>
						<span>{{info.hm_ext?info.hm_ext:'-'}}</span>
					</p>
					<p class="bifen">
						<span>{{info.aw_q1}}</span>
						<span>{{info.aw_q2}}</span>
						<span>{{info.aw_q3}}</span>
						<span>{{info.aw_q4}}</span>
						<span>{{info.aw_ext?info.aw_ext:'-'}}</span>
					</p>
				</template>
				<template v-else>
					<h3>vs</h3>
				</template>
			</div>
			<div class="rigth">
				<img :src='getImgUrl(deatil.aig)' :onerror='noImg'>
				<p>{{ deatil.az | ellipses("10")}}</p>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	name: 'deatilBannerlq',
	props:{
      deatil:Object,
    },
	data: function(){
		return {
			noImg:'this.src="/static/img/basket.png"',
			info:{},
		}
	},
	methods:{
		goback(){
			this.$router.back();
		},
		/*接口图片请求报403，是接口限制了图片的加载
		只要在请求到的图片链接前面加上‘https://images.weserv.nl/?url=’即可（注：这是一个专门缓存图片的网址），会有点慢。
		*/
		getImgUrl:function(_url) {
	  		var url = _url?_url:'/static/img/basket.png'
	  		return url;
       	}
	},
	//props会触这个钩子，下面三个钩子函数不会触发
	updated(){
		this.info = this.deatil
	},
	created(){
	},
	mounted () {


		//WebSocket
		var socket;
		if (!window.WebSocket) {
			window.WebSocket = window.MozWebSocket;
		}
		if (window.WebSocket) {
			socket = new WebSocket("ws://115.231.73.52:7220/");
			socket.onmessage = function(event) {
				console.log("收到服务器消息"+event.data);
			};
			socket.onopen = function(event) {
				var lqIngId=sessionStorage.getItem('lqIngId')
				console.log("已连接服务器LQDeatil");
				send(JSON.stringify({"serviceId":1229,"requestId":lqIngId}));
			};
			socket.onclose = function(event) { // WebSocket 关闭
				console.log("WebSocketLQDeatil已经关闭!");
				socket.close()
			};
			socket.onerror = function(event) {
				console.log("WebSocket异常!");
			};
		} else {
			alert("抱歉，您的浏览器不支持WebSocket协议!");
		}

		// WebSocket发送请求
		function send(message) {
			if (!window.WebSocket) { return; }
			if (socket.readyState == WebSocket.OPEN) {
				socket.send(message);
			} else {
				console.log("WebSocket连接没有建立成功!");
				alert("您还未连接上服务器，请刷新页面重试");
			}
		}

		var socketSerive = socket,t=this,timeSetLQ = null,lqIngId=sessionStorage.getItem('lqIngId');
		//如果比赛正在进行，要定时发送socket send,并接收message传回的数值,否则关闭socket和定时器
		timeSetLQ = setInterval(function(){
			socketSerive.onopen()
		},60000)
	    // socketSerive.
        socketSerive.addEventListener('message',function(event){
	        if (JSON.parse(event.data).status == 0) {
	        	const  data = JSON.parse(event.data).data;
	        	var html ='';
        		if (data.type == 3) {
		          	var tit =data.sts=="finished"?"完场":data.hm_q4?"第四节":data.hm_q3?'第三节':data.hm_q2?"第二节":data.hm_q1?"第一节":'正在进行中';
		          	html += '<p>'+tit+(data.sts=="inprogress"?"<b class='dian'>'</b>":"")+'</p>'
						html  += '<h3>'+data.hm_rs+' - '+data.aw_rs+'</h3>'
						html  +='<p class="bifen color_gray">'
						html  +=	'<span>1st</span>'
						html  +=	'<span>2nd</span>'
						html  +=	'<span>3rd</span>'
						html  +=	'<span>4th</span>'
						html  +=	'<span>OT</span>'
						html  +='</p>'
						html  +='<p class="bifen">'
						html  +=	'<span>'+(data.hm_q1?data.hm_q1:'-')+'</span>'
						html  +=	'<span>'+(data.hm_q2?data.hm_q2:'-')+'</span>'
						html  +=	'<span>'+(data.hm_q3?data.hm_q3:'-')+'</span>'
						html  +=	'<span>'+(data.hm_q4?data.hm_q4:'-')+'</span>'
						html  +=	'<span>'+(data.hm_ext?data.hm_ext:'-')+'</span>'
						html  +='</p>'
						html  +='<p class="bifen">'
						html  +=	'<span>'+(data.aw_q1?data.aw_q1:'-')+'</span>'
						html  +=	'<span>'+(data.aw_q2?data.aw_q2:'-')+'</span>'
						html  +=	'<span>'+(data.aw_q3?data.aw_q3:'-')+'</span>'
						html  +=	'<span>'+(data.aw_q4?data.aw_q4:'-')+'</span>'
						html  +=	'<span>'+(data.aw_ext?data.aw_ext:'-')+'</span>'
						html  +='</p>';
		        }else{
		          	var tit = data.sts=="finished"?"完场":data.hm_p2?"下半场":"上半场";
		          	html = '<p>'+tit+'</p>'
						html +=	'<h3>'+data.hm_rs+' - '+data.aw_rs+'</h3>'
						html +=	'<p class="bifen color_gray">'
						html +=		'<span>上半场</span>'
						html +=		'<span>下半场</span>'
						html +=		'<span>OT</span>'
						html +=	'</p>'
						html +=	'<p class="bifen">'
						html +=		'<span>'+(data.hm_p1?data.hm_p1:'-')+'</span>'
						html +=		'<span>'+(data.hm_p2?data.hm_p2:'-')+'</span>'
						html +=		'<span>'+(data.hm_ext?ata.hm_ext:'-')+'</span>'
						html +=	'</p>'
						html +=	'<p class="bifen">'
						html +=		'<span>'+(data.aw_p1?data.aw_p1:'-')+'</span>'
						html +=		'<span>'+(data.aw_p2?data.aw_p2:'-')+'</span>'
						html +=		'<span>'+(data.aw_ext?ata.aw_ext:'-')+'</span>'
						html +=	'</p>';
		        }
		        $('.con').html(html)
			}else{
				socketSerive.close()
				clearInterval(timeSetLQ)
			}
		});
        this.$once('hook:beforeDestroy', function () {
        	socketSerive.close()
          	clearInterval(timeSetLQ)
        })
	},
	activated () {
	}

};
</script>

<style lang="less" scoped>
	.banner{
	    position: fixed;
	    z-index: 100;
	    width: 100%;
	    left: 0;
	    top: 0;
	    height: 4.8rem;
	    background:url(/static/img/deatilBg.png) center no-repeat;
	    background-size:100% 100%;
	}
	.top{
		height: 1rem;
		color: #fff;
		.header-left{
			position: absolute;
	    	left: 0;
	    	top: 0;
		    width: 1rem;
		    height: 1rem;
		    text-align: center;
		    font-size: .5rem;
		    line-height:1rem;
		    color: #fff;
		}
		.header-center{
		    font-size: .36rem;
		    line-height: 1rem;
		    text-align: center;
		}
	}
	
</style>